<!-- 系统管理员管理端统计页面 -->
<template>
  <div class="">
    <!-- ↓↓↓ 社区人员 ↓↓↓ -->
    <div>
      <div id="cardArea">
        <el-card id="totalCount" class="box-card">
          <div class="info-label"><b>总用户数</b></div>
          <div class="info-label2">
            <svg-icon icon-class="user" class="icon" class-name="card-panel-icon" style="color:#409EFF;font-size:50px;float:left" />
            <span id="totalUser-num" class="num">{{ info.totalUser }}<span style="font-size:15px">人</span></span>
          </div>
        </el-card>

        <el-card id="contactCount" class="box-card">
          <div class="info-label"><b>分期订单</b></div>
          <div class="info-label2" style="color:#67C23A  ">
            <svg-icon icon-class="table" class="icon" class-name="card-panel-icon" style="font-size:50px;float:left" />
            <span id="contactUser-num" class="num">{{ info.totalOrdersStage }}<span style="font-size:15px">笔</span></span>
          </div>
        </el-card>
      </div>
      <div id="cardArea">
        <el-card id="feverCount" class="box-card">
          <div class="info-label"><b>直接订单</b></div>
          <div class="info-label2" style="color:#F56C6C">
            <svg-icon icon-class="table" class="icon" class-name="card-panel-icon" style="font-size:50px;float:left" />
            <span id="feverUser-num" class="num">{{ info.totalOrdersNotStage }}<span style="font-size:15px">笔</span>  </span>
          </div>
        </el-card>

        <el-card id="hospitalCount" class="box-card">
          <div class="info-label"><b>分成金额</b></div>
          <div class="info-label2" style="color: #E6A23C">
            <svg-icon icon-class="form" class="icon" class-name="card-panel-icon" style="font-size:50px;float:left" />
            <span id="hostipalUser-num" class="num">￥{{ info.totalOrdersPrice }}<span style="font-size:15px">元</span></span>
          </div>
        </el-card>
      </div>
      <!-- <el-card id="isolationCount" class="box-card">
        <div class="info-label"><b>隔离人数</b></div>
        <div class="info-label2" style="color:purple">
          <svg-icon icon-class="user" class="icon" class-name="card-panel-icon" style="font-size:50px;float:left" />
          <span id="isolationUser-num" class="num">{{ info.isolationUser }}<span style="font-size:15px">人</span></span>
        </div>
      </el-card> -->

    </div>
    <div id="search-card">
      <div id="search-content">
        <el-form v-model="select" :inline="true">
          <el-form-item label="机构">
            <!-- <el-input v-model="campus.orgId" autocomplete="off" /> -->
            <el-select v-model="select.orgId" placeholder="请选择" :change="orgChange()">
              <el-option
                v-for="o in org"
                :key="o.orgId"
                :value="o.orgId"
                :label="o.orgName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="分支机构">
            <!-- <el-input v-model="lesson.campus" autocomplete="off" /> -->
            <el-select v-model="select.campusId" placeholder="请选择">
              <el-option
                v-for="item in campuslist"
                :key="item.campusId"
                :value="item.campusId"
                :label="item.campusName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="统计单位">
            <el-select v-model="select.unit" placeholder="请选择">
              <el-option label="周" value="周" />
              <el-option label="月" value="月" />
              <el-option label="季" value="季" />
              <el-option label="年" value="年" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="margin-left:10px" @click="conditionQuery">统计</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="pie">
      <el-card class="community-pie-card">
        <div id="myPie1">
          <!-- 123 -->
        </div>
      </el-card>
    </div>
    <div id="search-card">
      <div id="search-content">
        <el-form v-model="search" :inline="true">
          <el-form-item label="年龄">
            <el-input v-model="search.userName" />
          </el-form-item>
          <el-form-item label="支付方式">
            <el-input v-model="search.orgName" />
          </el-form-item>
          <el-form-item label="价格区间">
            <el-col :span="11">
              <el-input v-model="search.price1" />
            </el-col>
            <el-col class="line" :span="2">——</el-col>
            <el-col :span="11">
              <el-input v-model="search.price2" />
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="margin-left:10px" @click="conditionQuery">统计</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>
      <el-table
        v-loading="listLoading"
        :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column
          label="序号"
          type="index"
          width="80"
          align="center"
        />

        <el-table-column
          align="center"
          prop="id"
          label="订单编号"
        />

        <el-table-column
          align="center"
          prop="userPhone"
          label="会员手机号"
        />

        <el-table-column
          align="center"
          prop="userName"
          label="会员姓名"
        />
        <!-- <el-table-column
          align="center"
          prop="userId"
          label="用户编号"
        /> -->

        <el-table-column
          align="center"
          prop="orgName"
          label="机构名称"
        />

        <el-table-column
          align="center"
          prop="campusName"
          label="分支机构名称"
        />

        <el-table-column
          align="center"
          prop="lessonName"
          label="服务项目"
        />

        <el-table-column
          align="center"
          prop="lessonName"
          label="年龄"
        />

        <el-table-column
          align="center"
          prop="payTime"
          label="支付时间"
          width="100px"
        />

        <el-table-column
          align="center"
          prop="payType"
          label="支付方式"
          width="100px"
        >
          <template slot-scope="Scope">
            <span v-if="Scope.row.payType==0">银联支付</span>
            <span v-if="Scope.row.payType==1">分期支付</span>
            <span v-if="Scope.row.payType==2">微信支付</span>
          </template>
        </el-table-column>

      </el-table>

      <div id="pages">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[5,10]"
          :page-size="pagesize"
          layout="total, sizes,prev, pager, next"
          :total="list.length"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>

</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { adminStatistic, shareRatio, conditionSearch } from '@/api/statistic'
import { getAllOrders } from '@/api/orders'
import { getAllOrg } from '@/api/org'
import { getAllCampus, getCampusByOrg } from '@/api/campus'
export default {
  name: 'AdminStatistic',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      info: {},
      currentPage: 1, // 默认显示页面为1
      pagesize: 5, //    每页的数据条数
      list: [],
      search: {},
      select: {},
      listLoading: false,
      dialogFormVisible: false,
      order: {},
      visible: false,
      org: [],
      campuslist: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.fetchData()
    this.getOrders()
    this.getAllOrg()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.draw()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    handleSizeChange: function(size) {
      this.pagesize = size
    },
    // 点击第几页
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
    },
    handleClick(row) {
      console.log(row)
    },
    fetchData() {
      adminStatistic().then((resp) => {
        this.info = resp.obj
        shareRatio().then((resp) => {
          this.info.totalOrdersPrice = resp.obj / 100
        })
      })
    },
    getOrders() {
      getAllOrders().then((resp) => {
        this.list = resp.obj
      })
      this.listLoading = false
    },
    getAllOrg() {
      getAllOrg().then((resp) => {
        this.org = resp.obj
      })
    },
    orgChange() {
      getCampusByOrg(this.select.orgId).then((resp) => {
        this.campuslist = resp.obj
      })
    },
    getAllCampus() {
      getAllCampus().then((resp) => {
        this.campuslist = resp.obj
        console.log(this.campuslist)
      })
    },
    draw() {
      const pieChart1 = this.$echarts.init(document.getElementById('myPie1'))
      var timeData = ['2020/7/24', '2020/7/25', '2020/7/26', '2020/7/27', '2020/7/28', '2020/7/29', '2020/7/30']

      timeData = timeData.map(function(str) {
        return str.replace('2020/', '')
      })
      pieChart1.setOption({
        title: {
          text: '交易量统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            saveAsImage: {}
          }
        },
        axisPointer: {
          link: { xAxisIndex: 'all' }
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 50,
            xAxisIndex: 0
          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        // xAxis: [
        //   {
        //     type: 'category',
        //     boundaryGap: false,
        //     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        //   }
        // ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: { onZero: true },
            data: timeData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            data: [120, 200, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      })
    },
    conditionQuery() {
      console.log(this.search)
      conditionSearch(this.search).then((data) => {
        this.list = data.obj
        this.search = {}
        this.currentPage = 1
      })
    }

  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>

#cardArea{
    margin: 50px;
    display: flex;
    justify-content: center;

}

 .box-card {
    margin-left: 30px;
    width: 400px;
    height: 180px;
  }

 .info-label{
    line-height: 50px;
    margin-top: 0px;
  }

  .info-label2{
    line-height: 100px;
    margin-top: 0px;
  }

  #totalUser-num{
  color: #409EFF;
  /* font-size: 35px; */
}

.info-label
{
  color: #606266;
  /* text-align: right; */
  /* font-size:35px; */
}

.num{
  float:right;
  text-align: right;
  font-size: 35px;
  margin-right: 10px;
  /* margin-left: 60%; */
}

.icon{
  margin-top: 15px;
  text-align: left;
}
.community-pie-card{

  /* width: 95%; */
  /* width: 57%; */
  float:right;
  margin-right: 5%;

}
.pie{
    display: flex;
    justify-content: center;
    margin-left: 3%;
    width: 100%;
}

#myPie1{
  width: 1200px;
  height: 530px;
}
#table-area{
  margin-left: 10px;
  margin-right: 10px;
}
#search-card {
  margin-left: 50px;
  margin-top: 30px;
  width: 100%;
  height: 70px;
  overflow-x: hidden;
}
</style>
